<template>
  <div class="home-blog">
    <div class="hero" :style="{ ...bgImageStyle }">
      <div class="motto">
        <ModuleTransition>
          <img class="hero-img" v-if="recoShowModule && $frontmatter.heroImage" :style="heroImageStyle || {}" :src="$withBase($frontmatter.heroImage)" alt="hero" />
        </ModuleTransition>

        <ModuleTransition delay="0.04" duration="0.5">
          <h1 v-if="recoShowModule && $frontmatter.heroText !== null" class="longcang">
            {{ motto.zh || $frontmatter.heroText || $title || "zealsay" }}
          </h1>
        </ModuleTransition>

        <ModuleTransition delay="0.08" duration="0.5">
          <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
            {{
              motto.en ||
              $frontmatter.tagline ||
              $description ||
              "Welcome to your zealsay site"
            }}
          </p>
        </ModuleTransition>

        <a href="#anchor" class="scroll-down bounce-enter-active down-arrow"></a>
      </div>
    </div>

    <ModuleTransition delay="0.16">
      <div id="anchor" v-show="recoShowModule" class="home-blog-wrapper">
        <div class="blog-list">
          <!-- 博客列表 -->
          <note-abstract :data="$recoPosts" :currentPage="currentPage"></note-abstract>
          <!-- 分页 -->
          <pagation class="pagation" :total="$recoPosts.length" :currentPage="currentPage" @getCurrentPage="getCurrentPage" />
        </div>
        <div class="info-wrapper">
          <PersonalInfo />
          <h4>
            <i class="iconfont reco-category"></i> {{ homeBlogCfg.category }}
          </h4>
          <ul class="category-wrapper">
            <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
              <router-link :to="item.path">
                <span class="category-name">{{ item.name }}</span>
                <span class="post-num" :style="{ backgroundColor: getOneColor() }">{{ item.pages.length }}</span>
              </router-link>
            </li>
          </ul>
          <hr />
          <h4 v-if="$tags.list.length !== 0">
            <i class="iconfont reco-tag"></i> {{ homeBlogCfg.tag }}
          </h4>
          <TagList @getCurrentTag="getPagesByTags" />
          <h4 v-if="
              $themeConfig.friendLink && $themeConfig.friendLink.length !== 0
            ">
            <i class="iconfont reco-friend"></i> {{ homeBlogCfg.friendLink }}
          </h4>
          <FriendLink />
        </div>
      </div>
    </ModuleTransition>

    <ModuleTransition delay="0.24">
      <Content v-show="recoShowModule" class="home-center" custom />
    </ModuleTransition>
  </div>
</template>

<script>
import TagList from "@theme/components/TagList";
import FriendLink from "@theme/components/FriendLink";
import NoteAbstract from "@theme/components/NoteAbstract";
import pagination from "@theme/mixins/pagination";
import ModuleTransition from "@theme/components/ModuleTransition";
import PersonalInfo from "@theme/components/PersonalInfo";
import { getOneColor } from "@theme/helpers/other";
import moduleTransitonMixin from "@theme/mixins/moduleTransiton";
import AOS from "aos";

export default {
  mixins: [pagination, moduleTransitonMixin],
  components: {
    NoteAbstract,
    TagList,
    FriendLink,
    ModuleTransition,
    PersonalInfo,
  },
  data () {
    return {
      recoShow: false,
      currentPage: 1,
      tags: [],
    };
  },
  computed: {
    homeBlogCfg () {
      return this.$recoLocales.homeBlog;
    },
    actionLink () {
      const { actionLink: link, actionText: text } = this.$frontmatter;

      return {
        link,
        text,
      };
    },
    motto () {
      return (
        this.$themeConfig.mottos[new Date().getDay()] || {
          zh: "愿你保持初心和善良,笑里尽是温暖与坦荡。",
          en:
            "May you keep your original heart and kindness, and smile with warmth and magnanimity.",
        }
      );
    },
    heroImageStyle () {
      return this.$frontmatter.heroImageStyle || {};
    },
    bgImageStyle () {
      //   const initBgImageStyle = {
      //     textAlign: 'center',
      //     overflow: 'hidden',
      //     background: `
      //       url(${this.$frontmatter.bgImage
      // ? this.$withBase(this.$frontmatter.bgImage)
      // : require('../images/bg.svg')}) center/cover no-repeat
      //     `
      //   }
      //   const {
      //     bgImageStyle
      //   } = this.$frontmatter
      //
      //   return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
    },
    heroHeight () {
      return document.querySelector(".hero").clientHeight;
    },
  },
  mounted () {
    this.recoShow = true;
    this._setPage(this._getStoragePage());
    AOS.init();
  },
  methods: {
    // 获取当前页码
    getCurrentPage (page) {
      this._setPage(page);
      setTimeout(() => {
        window.scrollTo(0, this.heroHeight);
      }, 100);
    },
    // 根据分类获取页面数据
    getPages () {
      let pages = this.$site.pages;
      pages = pages.filter((item) => {
        const { home, date } = item.frontmatter;
        return !(home == true || date === undefined);
      });
      // reverse()是为了按时间最近排序排序
      this.pages = pages.length == 0 ? [] : pages;
    },
    getPagesByTags (tagInfo) {
      this.$router.push({ path: tagInfo.path });
    },
    _setPage (page) {
      this.currentPage = page;
      this.$page.currentPage = page;
      this._setStoragePage(page);
    },
    getOneColor,
  },
};
</script>

<style lang="stylus">
.motto {
  text-align: center;
  color: white;
}

.home-blog {
  padding: 0;
  margin: 0px auto;

  .hero {
    // margin $navbarHeight auto 0
    // margin-top -3rem
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .hero-img {
      max-width: 300px;
      margin: 0 auto 1.5rem;
    }

    h1 {
      margin-top: 5rem;
      font-size: 2.5rem;
      font-weight: 700;
      background: -webkit-linear-gradient(left, #a8bfe9, #6894ea 25%, #a8bfe9 50%, #6894ea 75%, #a8bfe9);
      color: transparent;
      -webkit-background-clip: text;
      background-size: 200% 100%;
      animation: masked-animation 1.3s infinite linear;
    }

    .description {
      margin: 1.8rem auto;
      font-size: 1.6rem;
      line-height: 1.3;
      font-family: 'Playball', cursive !important;
      background: -webkit-linear-gradient(left, #6695ed, #a8bfe9 20%, #6695ed 40%, #a8bfe9 60%, #6695ed 80%, #a8bfe9);
      color: transparent;
      -webkit-background-clip: text;
      background-size: 200% 100%;
    }
  }

  .home-blog-wrapper {
    display: flex;
    align-items: flex-start;
    padding: 5rem 3rem;
    max-width: $homePageWidth;
    margin: 0 auto;

    .blog-list {
      flex: auto;
      width: 0;

      .abstract-wrapper {
        .abstract-item:last-child {
          margin-bottom: 0px;
        }
      }
    }

    .info-wrapper {
      position: -webkit-sticky;
      position: sticky;
      top: 10px; // 70px
      overflow: hidden;
      transition: all 0.3s;
      margin-left: 15px;
      flex: 0 0 300px;
      height: auto;
      box-shadow: var(--box-shadow);
      border-radius: $borderRadius;
      box-sizing: border-box;
      padding: 0 15px;
      background: var(--background-color);

      &:hover {
        box-shadow: var(--box-shadow-hover);
      }

      h4 {
        color: var(--text-color);
      }

      .category-wrapper {
        list-style: none;
        padding-left: 0;

        .category-item {
          margin-bottom: 0.4rem;
          padding: 0.4rem 0.8rem;
          transition: all 0.5s;
          border-radius: $borderRadius;
          box-shadow: var(--box-shadow);
          background-color: var(--background-color);

          &:hover {
            transform: scale(1.04);

            a {
              color: $accentColor;
            }
          }

          a {
            display: flex;
            justify-content: space-between;
            color: var(--text-color);

            .post-num {
              width: 1.6rem;
              height: 1.6rem;
              text-align: center;
              line-height: 1.6rem;
              border-radius: $borderRadius;
              background: #eee;
              font-size: 13px;
              color: #fff;
            }
          }
        }
      }
    }
  }
}

@keyframes masked-animation {
  100% {
    background-position: -100% 0;
  }
}

@media (max-width: $MQMobile) {
  .home-blog {
    .hero {
      // height 450px
      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 0 auto 1.8rem;
        font-size: 2rem;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      display: block !important;
      padding: 5rem 0;

      .blog-list {
        width: auto;
      }

      .info-wrapper {
        // display none!important
        margin-left: 0;

        .personal-info-wrapper {
          display: none;
        }
      }
    }
  }
}

@media (max-width: $MQMobileNarrow) {
  .home-blog {
    .hero {
      // height 450px
      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 0 auto 1.8rem;
        font-size: 2rem;
      }

      h1, .description, .action {
        // margin: 1.2rem auto;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      display: block !important;
      padding: 2rem 0;

      .blog-list {
        width: auto;
      }

      .info-wrapper {
        // display none!important
        margin-left: 0;

        .personal-info-wrapper {
          display: none;
        }
      }
    }
  }
}

.scroll-down {
  display: block;
  margin: 12rem auto 0 auto;
  bottom: 45px;
  width: 34px;
  height: 34px;
  font-size: 34px;
  text-align: center;
}

.bounce-enter-active {
  animation: bounce-in 2s infinite;
}

/* .bounce-leave-active { */
/* animation: bounce-in 4s 2s reverse; */
/* } */
@keyframes bounce-in {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}

.down-arrow {
  width: 20px;
  height: 20px;
}

.down-arrow:after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  border-right: 3px solid #ffffff;
  border-top: 3px solid #ffffff;
  -webkit-transform: rotate(135deg); /* 箭头方向可以自由切换角度 */
  transform: rotate(135deg);
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  transform: translate(-66px);
  transition: all 0.25s;
  height: 66px !important;
}

.aplayer.aplayer-narrow .aplayer-body, .aplayer.aplayer-narrow .aplayer-pic {
  height: 66px !important;
}

.aplayer .aplayer-info .aplayer-music .aplayer-title {
  font-size: 14px;
  color: #000;
}
</style>
